<template>
	<view>
		
		<view class="bg">
			
			<view class="log-head">
				<view class="up">
					<view class="textt">
						共{{equ_num}}台设备,总收益
					</view>
					<view class="total">
						¥{{total}}
					</view>
				</view>
				<view class="down">
					<view class="left">
						<view class="textp">
							本月收入(元)
						</view>
						<view class="money" style="display: flex;justify-content: center;">
							¥{{month}}
						</view>
					</view>
					<view class="right">
						<view class="textp">
							单日最高(元)
						</view>
						<view class="money" style="display: flex;justify-content: center;">
							¥{{max}}
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="shouyi">
				<view class="yi-des">
					<view class="shouyi-text">收益趋势</view>
					<view class="day">
						<!-- <view
							v-for="(tab,index1) in choDays" 
							:key="index1"
							class="seven"
							@tap="chodays(index1)"
							:class=' choIndex == index1?"actived":"" '
						>{{tab}}</view> -->
					</view>
				</view>
				
				<!-- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="shouyi-text">收益趋势</view> -->
					<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
				<!-- </view> -->
				<view class="qiun-charts">
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
					 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
					<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
				</view>
			</view>
			
			<view class="sy-item">
				<view class="sy-t" >
					<view class="sy-text">明细</view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" fields='month'>
						<view class="uni-input" style="font-size: 26rpx; color: #999999;">{{date}}▼</view>
					</picker>
				</view>
				<!-- @tap="info(item.create_time)" -->
				<view class="syi-content" v-for="(item,index1) in list" :key='index1' v-if="item.sum != null" >
					<view class="syi-con">
						<view class="y-time">
							{{item.create_time}}
						</view>
						<view class="y-time" style="">
							{{content.substring(0,4)}}
						</view>
						<!-- <view class="y-text">
							当日收益
						</view> -->
						<view class="y-money">
							¥{{item.sum}}
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js';
	var _self;
	var canvasObj = {};
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				total:0,
				max:0,
				month:0,
				list:[],
				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50,
				maxY:0,
				minY:0,
				content:'',
				date: currentDate,
				equ_num:0,
				choDays:['7天','  15天'],
				choIndex:0,
			}
		},
		onLoad(option) {
			
			this.equ_num = option.sum
			
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(720);
			this.cHeight = uni.upx2px(480);
			this.cWidth2 = uni.upx2px(700);
			this.cHeight2 = uni.upx2px(1100);
			this.cWidth3 = uni.upx2px(250);
			this.cHeight3 = uni.upx2px(250);
			this.arcbarWidth = uni.upx2px(24);
			this.gaugeWidth = uni.upx2px(30);
			
			this.getLog()
		},
		onReady() {
			this.getServerData();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.getLog()
			},
			chodays(index){
				this.choIndex = index
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				
				if (type === 'start') {
					year = year - 1;
				} else if (type === 'end') {
					year = year + 10;
				}
				month = month > 9 ? month : '0' + month;
				
				return `${year}-${month}`;
			},
					
			getLog(){
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getYesterday')({
					id:userinfo.id,
					date:this.date
				}).then(res=>{
					if(res.code == 200){
						this.list = res.data.list
						this.total = res.data.self
						this.max = res.data.max
						this.month = res.data.month
						this.content  = res.data.content
						// console.log(this.list)
					}
					uni.hideLoading()
				})
			},
			info(time){
				uni.navigateTo({
					url:`/pages/mine/revenue-info?time=${time}`
				})
			},
			getServerData() {
					/* let res1 = {
						"LineA": {
							"categories": ["08-14", "08-15", "08-16", "08-17", "08-18", "08-19", "08-20"],
							"series": [{
								"name": "成交量A",
								"data": [35, 8, 25, 37, 4, 20,33]
							}	]
						},
					} */
					
					let userinfo = uni.getStorageSync('userinfo');
					this.$api.interfaceApi('getLine')({
						id:userinfo.id,
						condition:3
					}).then(res=>{
						if(res.code == 200){
							
							this.maxY = res.data.max
							this.minY = res.data.min
							_self.fillData(res.data.list);
						}
					})
					
					
				},
				fillData(data) {
					this.serverData = data;
					this.tips = data.tips;
					
					let LineA = {
						categories: [],
						series: []
					};
					
					LineA.categories = data.LineA.categories;
					LineA.series = data.LineA.series;
			
					this.showLineA("canvasLineA", LineA);
			
				},
				
				
				showLineA(canvasId, chartData) {
					canvasObj[canvasId] = new uCharts({
						$this: _self,
						canvasId: canvasId,
						type: 'line',
						fontSize: 11,
						padding: [15, 15, 0, 15],
						
						legend: {
							show: false,
							padding: 5,
							lineHeight: 11,
							margin: 5,
						},
						dataLabel: false,
						dataPointShape: false,
						background: '#FFFFFF',
						pixelRatio: _self.pixelRatio,
						categories: chartData.categories,
						series: chartData.series,
						animation: false,
						enableScroll: true, //开启图表拖拽功能
						xAxis: {
							disableGrid: true,
							type: 'grid',
							gridType: 'dash',
							itemCount: 7,
							scrollShow: false,
							scrollAlign: 'left',
							//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
							//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
						},
						yAxis: {
							//disabled:true
							gridType: 'none',
							splitNumber: 5,
							min: 0,
							max: this.maxY,
							format: (val) => {
								return val.toFixed(0) + '元'
							}
						},
						width: _self.cWidth * _self.pixelRatio,
						height: _self.cHeight * _self.pixelRatio,
						dataLabel: true,
						dataPointShape: true,
						extra: {
							lineStyle: 'straight'
						},
					});
			
				},
				
				
				touchLineA(e) {
					canvasObj['canvasLineA'].scrollStart(e);
				},
				moveLineA(e) {
					canvasObj['canvasLineA'].scroll(e);
				},
				touchEndLineA(e) {
					canvasObj['canvasLineA'].scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvasObj['canvasLineA'].showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				},
			
		}
	}
</script>

<style scoped>
	.bg{
		background-color:#f1f1f1;
		padding: 0 2rpx 20rpx 2rpx;
	}
		
		.log-head{
				background-color: #FFFFFF;
				padding: 5rpx 0 30rpx 0;
			}
			.up{
				display: block;
				justify-content: center;
				align-items: center;
				text-align: center;
				margin: 5rpx 80rpx;
				padding:30rpx;
				border-bottom: 1rpx solid #eeeeee;
				box-sizing: border-box;
				}
				.textt{
					font-size: 36rpx;
					color: #000;
					font-weight: 550;
				}
				.total{
					color:#0066ff;
					font-weight: 550;
					font-size: 50rpx;
				}
				
			
			.down{
				display: flex;
				justify-content: space-between;
				padding:30rpx 60rpx ;
				}
				.left{
					margin: 10rpx;
					padding-right: 100rpx;
					border-right: 1rpx solid #eeeeee;
					
				}
					.textp{
						padding: 10rpx;
						color: #000;
					}
					.money{
						font-weight: 550;
						color:#0066ff;
						font-size: 36rpx;
					}
				.right{
					margin: 10rpx;
				}
				
			
		
		.shouyi{
			display: block;
			margin: 20rpx;
			background-color: #FFFFFF;
			justify-content: center;
			height: 600rpx;
			border-radius: 15rpx;
		}
			.yi-des{
				display: flex;
				justify-content: space-between;
				margin: 10rpx;
				padding: 10rpx;
				align-items: center;
			}
				.shouyi-text{
					margin: 10rpx;
					
				}
				.day{
					display: flex;
					margin: 12rpx;
					padding: 2rpx 20rpx;
					justify-content: space-between;
					align-items: center;
					text-align: center;
					border-radius: 35rpx;
					/* border:1rpx solid #0066ff; */
				}
				.seven{
					margin: 10rpx;
					/* padding: 0 6rpx; */
					text-align: center;
					font-size: 22rpx;
				}
				.seven:before {
				  content: "|";
				  float: left;
				  color: #94959E;
				}
				.seven:first-child:before {
				  display: none;
				}

				.actived{
					color: #0055ff;
				}
				.fifteen{
					padding-left: 20rpx;
					margin: 10rpx;
					border-left: 1rpx solid #e2e2e2;
				}
				
				
		.sy-item{
			display: block;
			margin: 30rpx 20rpx;
			border-radius: 15rpx;
			background-color: #fff;
		}
			.sy-t{
				display: flex;
				align-items: center;
				margin: 15rpx;
				padding: 10rpx;
				border-bottom: 1rpx solid #e2e2e2 ;
				justify-content: space-between;
			}
				.sy-text{
				margin: 10rpx;
				}
				
			.syi-content{
				display: block;
				font-size: 26rpx;
				color: #8a8a8a;
				padding: 10rpx;
			}
				.syi-con{
					display: flex;
					justify-content: space-between;
					margin: 15rpx;
				}
					.y-time{
						margin: 5rpx;
					}
					.y-text{
						margin: 5rpx;
					}
					.y-money{
						color: #ff9d00;
						margin: 5rpx;
						font-weight: bold;
					}
					
					
			
			.qiun-padding {
				padding: 2%;
				width: 96%;
			}
			
			.qiun-wrap {
				display: flex;
				flex-wrap: wrap;
			}
			
			.qiun-rows {
				display: flex;
				flex-direction: row !important;
			}
			
			.qiun-columns {
				display: flex;
				flex-direction: column !important;
			}
			
			.qiun-common-mt {
				margin-top: 10rpx;
			}
			
			.qiun-bg-white {
				background: #FFFFFF;
			}
			
			.qiun-title-bar {
				width: 96%;
				padding: 10rpx 2%;
				flex-wrap: nowrap;
			}
			
			.qiun-title-dot-light {
				border-left: 10rpx solid #0ea391;
				padding-left: 10rpx;
				font-size: 32rpx;
				color: #000000;
			}
			
			/* 通用样式 */
			.qiun-charts {
				/* width: 750rpx; */
				/* width:100%; */
				height: 500rpx;
				background-color: #FFFFFF;
			}
			
			.charts {
				/* width: 750rpx; */
				width:100%;
				height: 500rpx;
				background-color: #FFFFFF;
			}
			
			/* 横屏样式 */
			.qiun-charts-rotate {
				width: 700rpx;
				height: 1100rpx;
				background-color: #FFFFFF;
				padding: 25rpx;
			}
			
			.charts-rotate {
				width: 700rpx;
				height: 1100rpx;
				background-color: #FFFFFF;
			}
			
			/* 圆弧进度样式 */
			.qiun-charts3 {
				/* width: 750rpx;
				width:100%; */
				height: 250rpx;
				background-color: #FFFFFF;
				position: relative;
			}
			
			.charts3 {
				position: absolute;
				width: 250rpx;
				height: 250rpx;
				background-color: #FFFFFF;
			}
			
			.qiun-tip {
				display: block;
				width: auto;
				overflow: hidden;
				padding: 15rpx;
				height: 30rpx;
				line-height: 30rpx;
				margin: 10rpx;
				background: #ff9933;
				font-size: 30rpx;
				border-radius: 8rpx;
				justify-content: center;
				text-align: center;
				border: 1px solid #dc7004;
				color: #FFFFFF;
			}

</style>
